<template>
    <div class="relative flex-center wh-full theme2">
        <!--        <dark-mode-switch-->
        <!--            :dark="theme.darkMode"-->
        <!--            class="absolute left-48px top-24px z-3 text-20px"-->
        <!--            @update:dark="theme.setDarkMode"-->
        <!--        />-->

        <div class="content flex">
            <div class="left-content flex-1 relative" style="padding: 60px 10px">
                <div class="jb_logo flex-center">
                    <img
                        src="@/assets/imgs/_builtin/login2logo.png"
                        alt="JBolt 极速开发平台"
                    />
                </div>
                <div class="jb_login_systitle">省心 · 省事儿 · 极速开发</div>
                <ul class="jb_left_ul" style="padding: 20px 10px 30px 70px">
                    <li>基于JFinal最佳实践架构</li>
                    <li>前端组件自动化，省心极速开发</li>
                    <li>ORM自动扫描绑定</li>
                    <li>自动缓存机制，无需关心细节</li>
                    <li>多数据源支持，轻松开发多数据源项目</li>
                    <li>支持Mysql、Oracle、Postgresql、SqlServer等主流数据库</li>
                    <li>内置代码生成器，Model、Controller、Service都可生成</li>
                </ul>
            </div>
            <div class="right-content flex-1 flex-col justify-center items-center">
                <div class="text-24px mb-5 flex justify-start w-full pl-60px">登录</div>
                <n-form
                    ref="formRef"
                    :model="model"
                    :rules="rules"
                    size="large"
                    :show-label="false"
                    class="w-340px"
                >
                    <n-form-item path="username">
                        <n-input
                            v-model:value="model.username"
                            :placeholder="$t('page.login.common.userNamePlaceholder')"
                        >
                            <template #suffix>
                                <jb-icon
                                    color="#999"
                                    icon="fa-solid:user"
                                    class="text-18px mr-8px"
                                    :inline="true"
                                ></jb-icon>
                            </template>
                        </n-input>
                    </n-form-item>
                    <n-form-item path="password">
                        <n-input
                            v-model:value="model.password"
                            type="password"
                            :placeholder="$t('page.login.common.passwordPlaceholder')"
                        >
                            <template #suffix>
                                <jb-icon
                                    color="#999"
                                    icon="solar:lock-password-bold"
                                    class="text-18px mr-8px"
                                    :inline="true"
                                ></jb-icon>
                            </template>
                        </n-input>
                    </n-form-item>
                    <n-form-item v-if="useCaptcha" path="captcha">
                        <n-input
                            v-model:value="model.captcha"
                            :placeholder="$t('page.login.codeLogin.imageCodePlaceholder')"
                            class="captcha"
                            @keydown.enter="handleSubmit"
                        >
                            <template #suffix>
                                <image-verify v-model:value="model.jbcapkey" />
                            </template>
                        </n-input>
                    </n-form-item>
                    <n-space :vertical="true" :size="24">
                        <!--保持登录选项 -->
                        <!--            <div class="flex-y-center justify-between">-->
                        <!--                <n-checkbox v-model:checked="keepOn">{{-->
                        <!--                    $t('page.login.pwdLogin.rememberMe')-->
                        <!--                }}</n-checkbox>-->
                        <!--                &lt;!&ndash;                <n-button :text="true" @click="toLoginModule('reset-pwd')">&ndash;&gt;-->
                        <!--                &lt;!&ndash;                    {{ $t('page.login.pwdLogin.forgetPassword') }}&ndash;&gt;-->
                        <!--                &lt;!&ndash;                </n-button>&ndash;&gt;-->
                        <!--            </div>-->
                        <n-button
                            color="#4586eb"
                            size="large"
                            :block="true"
                            :loading="auth.loginLoading"
                            @click="handleSubmit"
                        >
                            {{ $t('page.login.common.confirm') }}
                        </n-button>
                    </n-space>
                </n-form>
            </div>
        </div>
        <copyright></copyright>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { storeToRefs } from 'pinia'
import type { FormInst, FormRules } from 'naive-ui'
import { useAuthStore, useThemeStore } from '@/store'
import { JBoltApi, randomCode, Rules } from '@/utils'
import { $t } from '@/locales'
import { md5 } from '@/utils/crypto'
import copyright from '../copyright/index.vue'
import { getServiceEnvConfig } from '~/.env-config'

const auth = useAuthStore()
const { loginByCaptcha } = useAuthStore()

const formRef = ref<HTMLElement & FormInst>()

const { darkMode } = storeToRefs(useThemeStore())
const { loginPage } = getServiceEnvConfig(import.meta.env)
const appName = loginPage?.title

const useCaptcha = ref<boolean>(false)

const rules: FormRules = {
    username: new Rules().required('请输入用户名').value,
    password: new Rules().required('请输入密码').value
}

JBoltApi.get('/api/captcha/checkUse').then(({ result }) => {
    useCaptcha.value = result.data
    if (result.data) {
        rules.captcha = new Rules()
            .required('请输入验证码')
            .length(4, '请输入4位字符').value
    }
})

const model = reactive({
    username: '',
    password: '',
    captcha: '',
    jbcapkey: ''
})

// const keepOn = ref(false)

async function handleSubmit() {
    await formRef.value?.validate()
    model.password = randomCode(2) + md5(model.password) + randomCode(3)
    const { username, password, captcha, jbcapkey } = model

    loginByCaptcha(username, password, captcha, jbcapkey).catch(() => {
        model.password = ''
        model.captcha = ''
        model.jbcapkey = ''
    })
}
onMounted(() => {
    if (darkMode.value) {
        useThemeStore().setDarkMode(false)
    }
})
</script>

<style scoped lang="scss">
.theme2 {
    background-image: url('@/assets/imgs/_builtin/login_bg_theme2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1px;
    box-sizing: border-box;
    z-index: 1;
    overflow: hidden;

    &:before {
        content: '';
        position: absolute;
        inset: -10px;
        background: inherit;
        z-index: 2;
        filter: blur(10px);
    }
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -500px;
    width: 1000px;
    height: 560px;
    margin-top: -280px;
    z-index: 999;
    background-color: #fff;
    box-shadow: 0 20px 80px 0 rgb(0 0 0 / 10%);
    border-radius: 6px;
    overflow: hidden;

    .left-content {
        background: linear-gradient(0deg, #0d57b7 0, #4687ec 100%);

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: url('@/assets/imgs/_builtin/login_left_bg.png') no-repeat 0 0;
        }

        .jb_logo {
            height: 80px;
            text-align: center;

            img {
                height: 100%;
            }
        }

        .jb_login_systitle {
            font-size: 26px;
            font-weight: 700;
            margin-top: 10px;
            margin-bottom: 10px;
            color: #fff;
            text-align: center;
            letter-spacing: 2px;
        }

        .jb_left_ul {
            padding: 30px 10px 30px 70px;
            color: white;

            li {
                list-style-type: disc;
                font-size: 15px;
                letter-spacing: 2px;
                padding: 5px 0;
                line-height: 20px;
            }
        }
    }

    .right-content {
        box-sizing: border-box;
        padding: 100px 40px;
    }
}

.captcha :deep(.n-input-wrapper) {
    padding-right: 0;
}

.captcha :deep(.n-input__suffix) {
    border-left: var(--n-border);
}
</style>
